<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-12 10:29:19
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.my-easy-offline.relative.h100
  div.container.overflow-y.mt4.px4
    el-form(ref="formRef", :model="form", :size="formSize", status-icon)
      el-row(:gutter="40")
        el-col(:span="6")
          el-form-item(label="订单ID", prop="id")
            el-input(v-model="form.id", placeholder="请输入", clearable)
        el-col(:span="6")
          el-form-item(label="订单编号", prop="order_no")
            el-input(v-model="form.order_no", placeholder="请输入", clearable)
        el-col(:span="6")
          el-form-item(label="标的名称", prop="goods_spec_name")
            el-input(v-model="form.goods_spec_name", placeholder="请输入", clearable)
        el-col(:span="6")
          el-form-item(label="行业类目", prop="category_id")
            el-select(
              v-model="form.category_id",
              placeholder="请选择",
              clearable,
              @change="categoryChange"
            )
              el-option(
                v-for="item in categoryList",
                :key="item.id",
                :label="item.name",
                :value="item.id"
              )
        el-col(:span="6")
          el-form-item(label="来源企业", prop="seller_company_id")
            el-select(
              v-model="form.seller_company_id",
              placeholder="请选择",
              clearable,
              @change="companyChange"
            )
              el-option(
                v-for="item in sourceCompanyList",
                :key="item.id",
                :label="item.name",
                :value="item.id"
              )
        el-col(:span="6")
          el-form-item(label="订单状态", prop="status")
            el-select(
              v-model="form.status",
              placeholder="请选择",
              clearable,
              @change="offlineListChange"
            )
              el-option(
                v-for="item in offlineList",
                :key="item.value",
                :label="item.name",
                :value="item.value"
              )
        el-col(:span="6")
          el-form-item(label="创建时间", prop="start_create_time")
            el-date-picker(
              v-model="form.start_create_time",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              @change="createChangeTime",
              :size="size"
            )
        el-col(:span="6")
          el-form-item(label="支付时间", prop="start_pay_time")
            el-date-picker(
              v-model="form.start_pay_time",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              @change="payChangeTime",
              :size="size"
            )
        el-col(:span="6")
          el-form-item(label="上次核销时间", prop="start_verify_time")
            el-date-picker(
              v-model="form.start_verify_time",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              @change="verifyChangeTime",
              :size="size"
            )
        el-col(:span="12")
        el-col(:span="6")
          .flex.justify-end
            el-button(type="primary", @click="onQueryChange") 查询
            el-button(@click="onQueryReset(formRef)") 重置
    .table
      el-table(
        :data="tableData",
        :header-cell-style="tableHeaderStyle",
        :cell-style="tableCellStyle",
        empty-text="暂无数据",
        border,
        style="width: 100%"
      )
        el-table-column(prop="id", label="订单ID", width="74")
        el-table-column(prop="order_no", label="订单编号", width="150")
        el-table-column(prop="goods_spec_name", label="标的名称", width="114")
          template(v-slot="scope")
            div(v-for="(item, index) in scope.row.goods_list", :key="index") {{ item.goods_spec_name }}
        el-table-column(prop="markImage", label="标的图片", width="150")
          template(v-slot="scope")
            el-image(
              v-for="(item, index) in scope.row.goods_list",
              :src="item.goods_spec_image"
              :zoom-rate="1.2"
              :preview-src-list="formatImage(scope.row.goods_list)"
              :initial-index="index"
              :preview-teleported="true"
              fit="cover")
        el-table-column(prop="markInfo", label="标的信息", width="214")
          template(v-slot="scope")
            div 行业类目：{{ scope.row.category ? scope.row.category : "" }}
            div 易出企业：{{ scope.row.company ? scope.row.company : "" }}
            div 联系电话：{{ scope.row.mobile ? scope.row.mobile : "" }}
        el-table-column(prop="money", label="易定金额", width="90")
        el-table-column(prop="available_money", label="可用金额", width="90")
        el-table-column(prop="payment", label="易定方式", width="90")
        el-table-column(prop="method", label="担保费", width="90")
          template(v-slot="scope")
            div {{ scope.row.method ? scope.row.method : "" }}
        el-table-column(prop="status", label="订单状态", width="90")
          template(v-slot="scope")
            div(:class="initStatusColor(scope.row.status)") {{ initStatusText(scope.row.status) }}
        el-table-column(prop="createtime", label="创建时间", width="117")
        el-table-column(prop="pay_time", label="支付时间", width="117")
        el-table-column(prop="confirm_time", label="核销时间", width="117")
        el-table-column(fixed="right", label="操作", width="230")
          template(v-slot="scope", #default)
            div(v-if="scope.row.btns") 
              el-button.overdue(
                v-if="scope.row.btns.refund == 1",
                link,
                type="primary",
                size="small",
                @click="onOnlineRefund(scope.row)"
              ) 退款
              el-button.black(
                v-if="scope.row.btns.view == 1",
                link,
                type="primary",
                size="small",
                @click="onLook(scope.row)"
              ) 查看订单
              el-button.refund(
                v-if="scope.row.btns.verification_log == 1",
                link,
                type="primary",
                size="small",
                @click="onVerifyRecord(scope.row)"
              ) 核销记录
              el-button.black(
                v-if="scope.row.btns.comment == 1",
                link,
                type="primary",
                size="small",
                @click="onEvaluate(scope.row)"
              ) 去评价
              el-button.black(
                v-if="scope.row.btns.view_comment == 1",
                link,
                type="primary",
                size="small",
                @click="onViewEvaluate(scope.row)"
              ) 查看评价
  //- 分页
  TablePagination(
    v-if="totalList > 0",
    :totalList="totalList",
    :page="form.page",
    @handleCurrentChange="handleCurrentChange")
  //- 评价
  el-dialog(
    v-model="evaluateVisible",
    width="783",
    align-center,
    :show-close="!rowId ? false : true",
    :destroy-on-close="true",
    center
  )
    Evaluate(
      :rowId="rowId",
      :commetDetetail="commetDetetail",
      @cancel="evaluateVisible = false",
      @confirm="onEvaluateConfirm"
    )
  //- 线下退款
  el-dialog(
    v-model="onlineRefundVisible",
    width="564",
    align-center,
    :show-close="rowId ? false : true",
    :destroy-on-close="true",
    center
  )
    OfflineRefund(
      :rowId="rowId",
      :ydMoney="ydMoney",
      :haveMoney="haveMoney",
      :refundMoney="refundMoney",
      @cancel="onlineRefundVisible = false",
      @confirm="onOnlineRefundConfirm"
    )
  //- 核销记录
  el-dialog(
    v-model="verifyRecordVisible",
    width="962",
    align-center,
    :show-close="true",
    :destroy-on-close="true",
    center
  )
    VerifyRecord(:rowId="rowId")
    //- 不文明提示
  el-dialog(
    v-model="nocivilizationVisible",
    width="564",
    align-center,
    :show-close="true",
    :destroy-on-close="true",
    center
    style="border-radius:12px"
  )
    .nocivilizationtittle {{ nocivilizationMsg }}
    .nocivilizationinfo(v-for="(item, index) in nocivilizationInfo") {{ index + 1 }}.{{ item.msg }}
      .infoMsg(v-for="(gitem, gindex) in item.words") {{ gitem }}
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import Evaluate from "@/views/end/my-easy/components/Evaluate.vue";
import OfflineRefund from "@/views/end/my-easy/components/OfflineRefund.vue";
import VerifyRecord from "@/views/end/my-easy/components/VerifyRecord.vue";
import TablePagination from "@/components/TablePagination.vue";
import { useRouter } from "vue-router";
import { Category, OrderParams } from "@/api/common";
import { CompanyAll } from "@/api/barterhall";
import {
  BuyerList,
  OrderRefundApply,
  OrderReceipt,
  CommentCreate,
} from "@/api/easymain";
const router = useRouter();
const { proxy } = getCurrentInstance();
const tabList = ref(["线上", "线下"]);
const formRef = ref();
// 生命周期
onMounted(() => {
  getCategory();
  getCompanyAll();
  getOrderParams();
  getBuyerList();
});
//获取我易定的列表
const getBuyerList = () => {
  BuyerList(form.value)
    .then((res) => {
      if (res.code == 1) {
        tableData.value = res.data.data;
        totalList.value = res.data.total;
        //按钮是否展示按照接口来
        console.log("按钮是否展示按照接口来", res.data.data);
      }
    })
    .catch((err) => {});
};
const form = ref({
  type: 2,
  id: "",
  order_no: "",
  goods_spec_name: "",
  category_id: "",
  seller_company_id: "",
  mobile: "",
  status: "",
  start_create_time: "", //开始创建时间
  end_create_time: "", //截止创建时间
  start_pay_time: "", //开始支付时间
  end_pay_time: "", //截止支付时间
  start_verify_time: "", //开始收货时间
  end_verify_time: "", //截止收货时间
  page: 1,
  page_size: 10,
});
const tableHeaderStyle = ref({
  backgroundColor: "#E5E6EB",
  color: "#000000",
  textAlign: "center",
});
const tableCellStyle = ref({
  textAlign: "center",
});
const tableData = ref([]);
const rowId = ref("");
const evaluateVisible = ref(false);
const receiveGoodsVisible = ref(false);
const onlineRefundVisible = ref(false);
const verifyRecordVisible = ref(false);

//行业类目
const categoryList = ref([]);
//获取行业类目
const getCategory = () => {
  Category().then((res) => {
    categoryList.value = res.data;
  });
};
//行业类目切换
const categoryChange = (val) => {
  console.log("val", val);
  form.value.category_id = val;
};

//来源企业
const sourceCompanyList = ref([]);
//获取来源企业
const getCompanyAll = () => {
  CompanyAll()
    .then((res) => {
      if (res.code == 1) {
        sourceCompanyList.value = res.data;
      }
    })
    .catch((err) => {});
};
//来源企业切换
const companyChange = (val) => {
  form.value.buyer_company_id = val;
  console.log("val", val);
};

//获取线上线下订单状态
const getOrderParams = () => {
  OrderParams()
    .then((res) => {
      // onlineList.value = res.data.online_status.list;
      offlineList.value = res.data.offline_status.list;
    })
    .catch((err) => {});
};
//订单状态
const offlineList = ref([]); //线上
// 订单状态切换
const offlineListChange = (val) => {
  form.value.status = val;
  console.log("val", val);
};

//创建时间
const createChangeTime = (val) => {
  form.value.start_create_time = val;
  form.value.end_create_time = val;
  console.log("开始创建时间", val);
};

//支付时间
const payChangeTime = (val) => {
  form.value.start_pay_time = val;
  form.value.end_pay_time = val;
};

//上次核销时间
const verifyChangeTime = (val) => {
  form.value.start_verify_time = val;
  form.value.end_verify_time = val;
};

// 状态颜色和文本
const initStatusColor = (status) => {
  return status == 10
    ? ""
    : status == 11
    ? "overdue"
    : status == 20
    ? "overdue"
    : status == 30
    ? "overdue"
    : status == 31
    ? "overdue"
    : status == 40
    ? "overdue"
    : status == 51
    ? "overdue"
    : "refund";
};
const initStatusText = (status) => {
  return status == 10
    ? "待支付"
    : status == 11
    ? "待生效"
    : status == 20
    ? "待发货"
    : status == 30
    ? "待收货"
    : status == 31
    ? "待核销"
    : status == 40
    ? "待评价"
    : status == 51
    ? "已取消"
    : "已完成";
};

// 查询
const onQueryChange = () => {
  console.log("form", form.value);
  getBuyerList();
  proxy.$message.success("查询");
};
// 重置
const onQueryReset = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  getBuyerList();
};

// 去评价&&查看评价&&退款&&核销记录
const onEvaluate = (row) => {
  commetDetetail.value = true;
  rowId.value = row.id;
  evaluateVisible.value = true;
};

//查看评价
const commetDetetail = ref(true);
const onViewEvaluate = (row) => {
  commetDetetail.value = false;
  rowId.value = row.id;
  evaluateVisible.value = true;
};
const ydMoney = ref(0);
const haveMoney = ref(0);
const refundMoney = ref(0);
const onOnlineRefund = (row) => {
  //易定金额
  ydMoney.value = row.money;
  //可用金额
  haveMoney.value = row.available_money;
  //退款金额
  refundMoney.value = Number(ydMoney.value) - Number(haveMoney.value);
  rowId.value = row.id;
  onlineRefundVisible.value = true;
};

//查看订单
const onLook = (row) => {
  router.push({
    path: "/order-detail-offline",
    query: {
      id: row.id,
      type: 1,
    },
  });
};
const onVerifyRecord = (row) => {
  rowId.value = row.id;
  verifyRecordVisible.value = true;
};
const nocivilizationInfo = ref([]);
const nocivilizationMsg = ref("");
const nocivilizationVisible = ref(false);
// 评价&&收货&&退款表单提交
const onEvaluateConfirm = (value) => {
  CommentCreate(value)
    .then((res) => {
      if (res.code == 1) {
        console.log("评价", rowId.value);
        evaluateVisible.value = false;
        ElMessage({ message: res.msg, type: "success" });
        getBuyerList();
      }
      if (res.code == 0) {
        evaluateVisible.value = false;
        ElMessage({ message: res.msg, type: "warning" });
        getBuyerList();
      }
      if (res.data.code == 402) {
        nocivilizationMsg.value = res.data.msg;
        nocivilizationInfo.value = res.data.data;
        evaluateVisible.value = true;
        nocivilizationVisible.value = true;
      }
      if (res.data.code == 403) {
        nocivilizationMsg.value = res.data.msg;
        nocivilizationInfo.value = res.data.data;
        evaluateVisible.value = true;
        nocivilizationVisible.value = true;
      }
    })
    .catch((err) => {
      // ElMessage({ message: err.msg, type: "error" });
      evaluateVisible.value = true;
        // nocivilizationVisible.value = true;
    });
};
const onOnlineRefundConfirm = (value) => {
  OrderRefundApply(value)
    .then((res) => {
      if (res.code == 1) {
        onlineRefundVisible.value = false;
        ElMessage({ message: res.msg, type: "success" });
        getBuyerList();
      }
      if (res.code == 0) {
        onlineRefundVisible.value = false;
        ElMessage({ message: res.msg, type: "warning" });
        getBuyerList();
      }
    })
    .catch((err) => {
      // ElMessage({ message: err.msg, type: "error" });
    });
};
// 预览图片列表
const formatImage = (list) => {
  const imageArr = [];
  list.forEach((item, index) => {
    imageArr.push(item.goods_spec_image);
  });
  return imageArr;
};
// 数据总条数
const totalList = ref(0);
const handleCurrentChange = (val) => {
  form.value.page = val;
  getBuyerList();
};
</script>

<style lang="stylus" scoped>
.nocivilizationtittle {
  background-color: #F5F5F5;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87);
  line-height: 22px;
  padding: 10px;
}

.nocivilizationinfo {
  margin-top: 16px;
}

.infoMsg {
  margin-top: 16px;
  text-indent: 10px;
}
.img-size {
  width: 100px;
  height: 58px;
  border-radius: 10px 10px 10px 10px;
}

.my-easy-offline {
  .container {
    height: calc(100vh - 304px);
  }
  .overdue {
    color: #E84026 !important;
  }

  .refund {
    color: #2487E8;
  }

  .black {
    color: #606266;
  }

  .no-quota {
    margin-top: 200px;
  }
}
</style>
